<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">

      <el-form-item label="订单状态" prop="orderState">
        <el-select v-model="queryParams.orderState" placeholder="请选择订单状态" clearable size="small">
          <el-option
            v-for="dict in orderStateOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="订单号" prop="orderNum">
        <el-input
          v-model="queryParams.orderNum"
          placeholder="请输入订单号"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item label="车牌号" prop="carNum">
        <el-input
          v-model="queryParams.carNum"
          placeholder="请输入车牌号"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>


      <el-form-item label="优惠券" prop="useCoupon">
        <el-select v-model="queryParams.useCoupon" placeholder="请选择是否使用了优惠券" clearable size="small">
          <el-option
            v-for="dict in useCouponOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="订单类型" prop="orderType">
        <el-select v-model="queryParams.orderType" placeholder="请选择订单类型 " clearable size="small">
          <el-option
            v-for="dict in orderTypeOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>


      <el-form-item label="检测结果" prop="checkResult">
        <el-select v-model="queryParams.checkResult" placeholder="请选择检测结果" clearable size="small">
          <el-option
            v-for="dict in checkResultOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="支付状态" prop="isPay">
        <el-select v-model="queryParams.isPay" placeholder="请选择是否已支付" clearable size="small">
          <el-option
            v-for="dict in isPayOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="支付通道" prop="payChannel">
        <el-select v-model="queryParams.payChannel" placeholder="请选择支付通道" clearable size="small">
          <el-option
            v-for="dict in payChannelOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="创建时间">
        <el-date-picker
          v-model="dateRange"
          :unlink-panels="unlinkPanels"
          size="small"
          style="width: 240px"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="完成时间">
        <el-date-picker
          v-model="finishDateRange"
          :unlink-panels="unlinkPanels"
          size="small"
          style="width: 240px"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">

    </el-row>

    <el-table v-loading="loading" :data="orderList">
<!--      <el-table-column type="expand">-->
<!--        <template slot-scope="props">-->
<!--          <el-card class="box-card">-->
<!--            <div class="text item">-->
<!--              <el-row :gutter="24" class="expand-item">-->
<!--                <el-col :span="6">订单金额：{{props.row.orderPrice}} /元</el-col>-->
<!--                <el-col :span="6">代驾费：{{props.row.driverFee}} /元</el-col>-->
<!--                <el-col :span="6">检测费：{{props.row.stationFee}} /元</el-col>-->
<!--                <el-col :span="6">代金券：{{props.row.couponFee}} /元</el-col>-->
<!--              </el-row>-->
<!--              <el-row :gutter="24" class="expand-item">-->
<!--                <el-col :span="6">订单金额：{{props.row.orderPrice}} /元</el-col>-->

<!--                <el-col :span="6">支付通道：{{payChannelFormat(props.row.payChannel)}}</el-col>-->
<!--              </el-row>-->
<!--            </div>-->
<!--          </el-card>-->
<!--        </template>-->
<!--      </el-table-column>-->
      <el-table-column label="订单号" align="center" prop="orderNum"/>
      <el-table-column label="车牌号" align="center" prop="carNum"/>
      <el-table-column label="实际支付" align="center" prop="actPrice"/>
      <el-table-column label="订单状态" align="center" prop="orderState" :formatter="orderStateFormat"/>
      <el-table-column label="订单类型" align="center" prop="orderType" :formatter="orderTypeFormat"/>
      <el-table-column label="检测结果" align="center" prop="checkResult" :formatter="checkResultFormat"/>
      <el-table-column label="订单备注" align="center" prop="remark"/>
      <el-table-column label="预约时间" align="center" prop="bookTime" width="180"/>
      <el-table-column label="创建时间" align="center" prop="gmtTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.gmtTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="完成时间" align="center" prop="finishTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.finishTime) }}</span>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
  import {listOrder} from "@/api/etc/order";
  import defaultSettings from '@/settings'
  import {mapGetters} from "vuex";

  export default {
    name: "Order",
    props: {
      memberId: {
        type: Number,
        default: undefined
      },
      driverId: {
        type: Number,
        default: undefined
      },
      stationId: {
        type: Number,
        default: undefined
      },
      agentId: {
        type: Number,
        default: undefined
      },
      partnerId: {
        type: Number,
        default: undefined
      },
      appid: {
        type: String,
        default: undefined
      },
      provider: {
        type: Number,
        default: undefined
      },
      stationAgentId: {
        type: Number,
        default: undefined
      },
      stationAgentAll: {
        type: Number,
        default: undefined
      }
    },
    data() {
      return {
        ddkkopen: false,
        orderId: null,
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 总条数
        total: 0,
        // 订单表格数据
        orderList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        timeopen: false,
        imgopen: false,
        mjwjopen: false,
        driveropen: false,
        stationopen:false,
        mjwjreasonshow: false,
        mjwjreasonipt: false,
        // 订单状态字典
        orderStateOptions: [],
        // 是否使用了优惠券字典
        useCouponOptions: [],
        // 订单类型 1六年免检 2 代驾审车  3 自驾审车字典
        orderTypeOptions: [],
        // 检测结果   1合格   0不合格字典
        checkResultOptions: [],
        // 是否已支付   0为支付   1已支付字典
        isPayOptions: [],
        // 支付通道  1微信  2支付宝字典
        payChannelOptions: [],
        // 六年免检拒绝原因
        reasonOps: [],
        // 扣款金额
        orderChargeOptions: [],
        // 日期范围
        dateRange: [],
        finishDateRange: [],
        unlinkPanels:true,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          memberId: this.memberId,
          driverId: this.driverId,
          orderState: undefined,
          stationId: this.stationId,
          agentId: this.agentId,
          partnerId:this.partnerId,
          orderNum: undefined,
          carNum: undefined,
          useCoupon: undefined,
          orderType: undefined,
          driverVerfiCode: undefined,
          stationVerfiCode: undefined,
          checkResult: undefined,
          isPay: undefined,
          gmtStartTime: undefined,
          gmtEndTime: undefined,
          finishStartTime: undefined,
          finishEndTime: undefined,
          outTradeNo: undefined,
          payChannel: undefined,
          appid: this.appid,
          provider: this.provider,
          stationAgentId: this.stationAgentId,
          stationAgentAll: this.stationAgentAll
        },
        // 表单参数
        form: {},
        // 表单校验
        rules: {},
        imgpre: defaultSettings.ossPreview,
        fit: 'fill',
        zindex:5000,
        url:process.env.VUE_APP_BASE_API + '/common/upload/oss',
        defaultImg:'',
        profitopen: false,
        actPrice: 0
      };
    },
    created() {
      this.getList();
      this.getDicts("order_state").then(response => {
        this.orderStateOptions = response.data;
      });
      this.getDicts("sys_is_enable").then(response => {
        this.useCouponOptions = response.data;
        this.isPayOptions = response.data;
      });
      this.getDicts("order_type").then(response => {
        this.orderTypeOptions = response.data;
      });
      this.getDicts("check_result").then(response => {
        this.checkResultOptions = response.data;
      });
      this.getDicts("pay_channel").then(response => {
        this.payChannelOptions = response.data;
      });
      this.getDicts("express_company").then(response => {
        this.compOps = response.data;
      });
      this.getDicts("six_year_reject_reason").then(response => {
        this.reasonOps = response.data;
      });
      this.getDicts("order_charge").then(response => {
        this.orderChargeOptions = response.data;
      });
    },
    computed: {
      ...mapGetters(['token']),
      headers() {
        return{
          "Authorization": this.token // 直接从本地获取token就行
        }
      }
    },
    methods: {
      addGmtDateRange(params, dateRange) {
        var search = params;
        search.gmtStartTime = "";
        search.gmtEndTime = "";
        if (null != dateRange && '' != dateRange) {
          search.gmtStartTime = dateRange[0];
          search.gmtEndTime = dateRange[1];
        }
        return search;
      },
      addFinishDateRange(params, dateRange) {
        var search = params;
        search.finishStartTime = "";
        search.finishEndTime = "";
        if (null != dateRange && '' != dateRange) {
          search.finishStartTime = dateRange[0];
          search.finishEndTime = dateRange[1];
        }
        return search;
      },
      /** 查询订单列表 */
      getList() {
        this.loading = true;
        this.addGmtDateRange(this.queryParams,this.dateRange);
        this.addFinishDateRange(this.queryParams,this.finishDateRange);
        listOrder(this.queryParams).then(response => {
          this.orderList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      }, // 订单状态字典翻译
      orderStateFormat(row, column) {
        return this.selectDictLabel(this.orderStateOptions, row.orderState);
      },
      // 是否使用了优惠券字典翻译
      useCouponFormat(row, column) {
        return this.selectDictLabel(this.useCouponOptions, row.useCoupon);
      },

      // 订单类型 1六年免检 2 代驾审车  3 自驾审车字典翻译
      orderTypeFormat(row, column) {
        return this.selectDictLabel(this.orderTypeOptions, row.orderType);
      },
      // 检测结果   1合格   0不合格字典翻译
      checkResultFormat(row, column) {
        return this.selectDictLabel(this.checkResultOptions, row.checkResult);
      },
      // 是否已支付   0为支付   1已支付字典翻译
      isPayFormat(row, column) {
        return this.selectDictLabel(this.isPayOptions, row.isPay);
      },
      payChannelFormat(data) {
        return this.selectDictLabel(this.payChannelOptions, data);
      },
      // 表单重置
      reset() {
        this.form = {
          id: undefined,
          memberId: undefined,
          driverId: undefined,
          orderState: undefined,
          stationId: undefined,
          remark: undefined,
          orderNum: undefined,
          orderPrice: undefined,
          actPrice: undefined,
          stationFee: undefined,
          driverFee: undefined,
          couponFee: undefined,
          useCoupon: undefined,
          orderType: undefined,
          driverVerfiCode: undefined,
          stationVerfiCode: undefined,
          checkResult: undefined,
          isPay: undefined,
          gmtTime: undefined,
          outTradeNo: undefined,
          payChannel: undefined
        };
        this.resetForm("form");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      handleCommand(command) {
        this.$message('click on item ' + command);
      },
    }
  };
</script>
<style>
  .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }
  .el-icon-arrow-down {
    font-size: 6px;
  }
  .el-dropdown {
    font-size: 12px;
  }


  /*1.显示滚动条：当内容超出容器的时候，可以拖动：*/
  .el-drawer__body {
    overflow: auto;
    /* overflow-x: auto; */
  }

  /*2.隐藏滚动条，太丑了*/
  .el-drawer__container ::-webkit-scrollbar{
    display: none;
  }
</style>
